<template>
	<view class="app-content">
		<u-transition :show="!loading" mode="fade-left">
		<!-- 导航 -->
		<view>
			<u-navbar :title="title" :leftIconSize="0" titleStyle="color:#fff" :bgColor="bgColor" v-if="!loading" :fixed="true" :placeholder="true">
				<view slot="left">
					<view class="u-nav-slot" v-if="daohang.list.length<=0">
						<u-icon color="#fff" @click="tofanhui()" name="arrow-left" size="19" ></u-icon>
						<u-line direction="column" :hairline="false" length="16" margin="0 8px" ></u-line>
						<u-icon color="#fff" @click="toindex()" name="home" size="20" ></u-icon>
					</view>
				</view>
			</u-navbar>
		</view>
		<view class="xiangqing">
			<view class="login_heard" :style="'background-color:'+bgColor+';'"></view>
			<view class="login_title">
				<view class="login_title_center">
					<view class="login_title_center_tabs">
						<u-tabs :list="loginTitleList" :current="loginTitleCur" :activeStyle="{ color:bgColor, fontWeight: 'bold',transform: 'scale(1.05)' }" :lineColor="bgColor" @click="loginTitleClick"></u-tabs>
					</view>
				</view>
			</view>
			<u-transition :show="loginTitleCur==0" mode="slide-left">
				<view class="login_center" v-if="loginTitleCur==0">
					<view class="login_center_input margin-b40">
						<u--input
								border="none"
								placeholder="请输入您的用户名或手机号"
								prefixIcon="account-fill"
								:prefixIconStyle="'font-size: 22px;color:'+bgColor+';'"
								:placeholderStyle="'font-size: 25rpx;color:'+bgColor+';'"
								shape="circle"
								v-model="loginForm.uname"
							></u--input>
					</view>
					<view class="login_center_input margin-b40">
						<u--input
								border="none"
								placeholder="请输入您的登录密码"
								prefixIcon="lock-fill"
								:prefixIconStyle="'font-size: 22px;color:'+bgColor+';'"
								:placeholderStyle="'font-size: 25rpx;color:'+bgColor+';'"
								shape="circle"
								password
								v-model="loginForm.password"
							></u--input>
					</view>
					<view class="login_center_input margin-b60" v-if="config.isCode=='1'">
						<!-- #ifndef APP-NVUE -->
						<u-input 
							border="none"
							placeholder="请输入图形验证码"
							prefixIcon="tags-fill"
							:prefixIconStyle="'font-size: 22px;color:'+bgColor+';'"
							:placeholderStyle="'font-size: 25rpx;color:'+bgColor+';'"
							v-model="loginForm.code"
							shape="circle">
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						<u--input 
								border="none"
								placeholder="请输入图形验证码"
								prefixIcon="tags-fill"
								:prefixIconStyle="'font-size: 22px;color:'+bgColor+';'"
								:placeholderStyle="'font-size: 25rpx;color:'+bgColor+';'"
								v-model="loginForm.code"
								shape="circle">
						<!-- #endif -->
							<template slot="suffix">
								<img @click="getshijiancuo()" :src="config.checkcode+'/'+codeSjc" style="width: 80px;">
							</template>
						<!-- #ifndef APP-NVUE -->
						</u-input>
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						</u--input>
						<!-- #endif -->
					</view>
					<view>
						<u-button :color="bgColor" :disabled="btnLoading" :loading="btnLoading" loadingText="登录中" text="登录" @click="signInBtn('uname')" shape="circle"></u-button>
					</view>
					<view class="margintop20 km_font26">
						<text :style="'color:'+bgColor+';'" @click="forgetPwd">忘记密码</text>
						<text class="km_float_right" :style="'color:'+bgColor+';'" @click="tourl('/pages/login/register')">注册账号</text>
					</view>
				</view>
			</u-transition>
			<u-transition :show="loginTitleCur==1" mode="slide-right">
				<view class="login_center" v-if="loginTitleCur==1">
					<view class="login_center_input margin-b40">
						<u--input
								border="none"
								placeholder="请输入您的手机号"
								prefixIcon="phone-fill"
								:prefixIconStyle="'font-size: 22px;color:'+bgColor+';'"
								:placeholderStyle="'font-size: 25rpx;color:'+bgColor+';'"
								shape="circle"
								v-model="loginForm.phone"
							></u--input>
					</view>
					<view class="login_center_input margin-b40" v-if="config.isCode=='1'">
						<!-- #ifndef APP-NVUE -->
						<u-input 
							border="none"
							placeholder="请输入图形验证码"
							prefixIcon="tags-fill"
							:prefixIconStyle="'font-size: 22px;color:'+bgColor+';'"
							:placeholderStyle="'font-size: 25rpx;color:'+bgColor+';'"
							v-model="loginForm.code"
							shape="circle">
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						<u--input 
								border="none"
								placeholder="请输入图形验证码"
								prefixIcon="tags-fill"
								:prefixIconStyle="'font-size: 22px;color:'+bgColor+';'"
								:placeholderStyle="'font-size: 25rpx;color:'+bgColor+';'"
								v-model="loginForm.code"
								shape="circle">
						<!-- #endif -->
							<template slot="suffix">
								<img @click="getshijiancuo()" :src="config.checkcode+'/'+codeSjc" style="width: 80px;">
							</template>
						<!-- #ifndef APP-NVUE -->
						</u-input>
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						</u--input>
						<!-- #endif -->
					</view>
					<view class="login_center_input margin-b60" v-if="config.isSmsLogin=='1'">
						<!-- #ifndef APP-NVUE -->
						<u-input 
							border="none"
							placeholder="请输入短信验证码"
							prefixIcon="fingerprint"
							:prefixIconStyle="'font-size: 22px;color:'+bgColor+';'"
							:placeholderStyle="'font-size: 25rpx;color:'+bgColor+';'"
							v-model="loginForm.smsCode"
							shape="circle">
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						<u--input 
								border="none"
								placeholder="请输入短信验证码"
								prefixIcon="fingerprint"
								:prefixIconStyle="'font-size: 22px;color:'+bgColor+';'"
								:placeholderStyle="'font-size: 25rpx;color:'+bgColor+';'"
								v-model="loginForm.smsCode"
								shape="circle">
						<!-- #endif -->
							<template slot="suffix">
								<u-code
									ref="uCode"
									@change="smsCodeChange"
									:keepRunning="true"
									seconds="60"
									changeText="X秒重新获取"
								></u-code>
								<u-button
									@tap="getSmsCode"
									:text="codeTips"
									:color="bgColor"
									size="mini"
								></u-button>
							</template>
						<!-- #ifndef APP-NVUE -->
						</u-input>
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						</u--input>
						<!-- #endif -->
					</view>
					<view class="margintop20">
						<u-button :color="bgColor" :disabled="btnLoading" :loading="btnLoading" loadingText="登录中" text="登录" @click="signInBtn('phone')" shape="circle"></u-button>
					</view>
				</view>
			</u-transition>
			<!-- 协议和规则 -->
			<view class="xieyi">
				<view class="xieyi_false" v-if="!isXieyi" @click="xieyiBtn" :style="'border-color:'+bgColor+';'"></view>
				<view class="xieyi_true" v-if="isXieyi" @click="xieyiBtn">
					<u-icon name="checkmark-circle-fill" :color="bgColor" size="34rpx"></u-icon>
				</view>
				<view class="xieyi_text" @tap="xieyiBtn">
					同意{{config.codeName}}的<view class="xieyi_link" :style="'color:'+bgColor+';'" @tap.stop="tourl(config.yszcUrl)">隐私政策</view>和<view class="xieyi_link" :style="'color:'+bgColor+';'" @tap.stop="tourl(config.yhxyUrl)">用户协议</view>
				</view>
			</view>
			<view class="loginType" v-if="LoginGd">
				<view class="loginType_center">
					<u-divider text="更多登录方式" :textColor="bgColor" textSize="26rpx"></u-divider>
					<view class="loginType_data">
						<view class="loginType_data_item" @click="weixinLogin()">
							<u-icon name="weixin-fill" :color="'#04BE02'" size="70rpx"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
		</u-transition>
		<u-tabbar v-if="daohang.list.length>0" :zIndex="999" :border="daohang.navi_set.border=='1'?true:false" :value="daohang.naviKey" :activeColor="daohang.navi_set.active_color" :inactiveColor="daohang.navi_set.inactive_color">
			<u-tabbar-item v-for="(item,index) in daohang.list" :badge="item.badge" :key="index" :text="item.text" :icon="daohang.naviKey==index?item.selectedIconPath:item.iconPath" @click="tabClick(item,index)" ></u-tabbar-item>
		</u-tabbar>
		<u-no-network @disconnected="disconnected" ></u-no-network>
		<u-toast ref="uToast" />
		<view class="km_loading" v-if="loading">
			<image src="@/static/loading_3.gif" mode=""></image>
		</view>
	</view>
</template>

<script>
	const BACK_URL = "login_back_url";
	import {
		wappConfig
	} from "@/api/api.js";
	import {
		userApi,getuserinfo
	} from "@/api/user.js";
	import {
		isWeixin
	} from "@/utils";
	import auth from '@/libs/wechat.js';
	export default {
		data() {
			return {
				title: '登录',
				bgColor:"#5064eb",
				loading:true,
				config:{},
				pagePath:'/pages/login/index',
				daohang:{
					list:[],
					naviKey:0,
					navi_set:{
						active_color: "#34C083",
						height: 100,
						inactive_color: "#757575",
					}
				},
				loginForm:{
					uname:"",
					password:"",
					code:"",
					smsCode:"",
					phone:"",
				},
				user:{},
				loginTitleList:[
					{key:"uname",name: '账号登录'},
				],
				loginTitleCur:0,
				codeTips: '',
				codeSjc:"",
				isXieyi:false,
				btnLoading:false,
				LoginGd:true,
			}
		},
		components: {
		},
		onLoad(e) {
			console.log(e)
			this.getconfig();
			// #ifdef H5 
				if (!isWeixin()) {
					this.LoginGd=false;
				}
			// #endif
		},
		onShow() {
			if (this.$store.getters.isLogin) {
				this.getuser();
			}
		},
		methods: {
			weixinLogin(){
				let t=this;
				if(!t.isXieyi){
					t.$refs.uToast.show({
						type: 'error',
						message:"请先同意"+t.config.codeName+"的隐私政策和用户协议"
					})
					return false;
				}
				// #ifdef H5
					if (isWeixin()) {
						let urlData = location.pathname + location.search
						if (urlData.indexOf('?') !== -1) {
							urlData += '&go_longin=1';
						} else {
							urlData += '?go_longin=1';
						}
						if (!t.$Cache.has('snsapiKey')) {
							console.log(1)
							auth.oAuth('snsapi_base', urlData);
						} else {
							uni.navigateTo({
								url: '/pages/login/index',
							});
						}
					
					}
				// #endif
			},
			toxyzc(e){
				console.log(e)
			},
			xieyiBtn(){
				this.isXieyi=!this.isXieyi;
			},
			// 登录按钮
			signInBtn(e){
				let t=this;
				if(!t.isXieyi){
					t.$refs.uToast.show({
						type: 'error',
						message:"请先同意"+t.config.codeName+"的隐私政策和用户协议"
					})
					return false;
				}
				if(e=='uname'){
					console.log('账号登录')
					if(!uni.$u.trim(t.loginForm.uname)){
						t.$refs.uToast.show({
							type: 'error',
							message:"请输入账号或手机号"
						})
						return false;
					}
					if(t.config.isCode=='1'){
						if(!uni.$u.trim(t.loginForm.code)){
							t.$refs.uToast.show({
								type: 'error',
								message:"请输入图形验证码"
							})
							return false;
						}
					}
					if(!uni.$u.trim(t.loginForm.password)){
						t.$refs.uToast.show({
							type: 'error',
							message:"请输入登录密码"
						})
						return false;
					}
					let dt={
						username:uni.$u.trim(t.loginForm.uname),
						password:uni.$u.trim(t.loginForm.password),
						type:'uname',
						code:uni.$u.trim(t.loginForm.code),
						codetype:t.codeSjc,
						os:t.$store.getters.systeminfo
					}
					t.signIn(dt);

				}
				if(e=='phone'){
					console.log('手机登录')
					//uni.$u.test.mobile(value);
					if(!uni.$u.trim(t.loginForm.phone)){
						t.$refs.uToast.show({
							type: 'error',
							message:"请输入手机号"
						})
						return false;
					}
					if(!uni.$u.test.mobile(t.loginForm.phone)){
						t.$refs.uToast.show({
							type: 'error',
							message:"手机号格式不正确"
						})
						return false;
					}
					if(!uni.$u.trim(t.loginForm.smsCode)){
						t.$refs.uToast.show({
							type: 'error',
							message:"请输入短信验证码"
						})
						return false;
					}
					let dt={
						phone:uni.$u.trim(t.loginForm.phone),
						code:uni.$u.trim(t.loginForm.smsCode),
						type:'phone',
						os:t.$store.getters.systeminfo
					}
					t.signIn(dt);
					
				}
			},
			signIn(dt){
				let t=this;
				if(!dt){
					t.$refs.uToast.show({
						message: '参数有误',
						type: 'error'
					})
					return false;
				}
				t.btnLoading=true;
				uni.showLoading({
					title:"登录中..."
				})
				userApi('signIn',dt,'post',true).then(res=>{
					t.$refs.uToast.show({
						message: '登录成功!!!马上跳转',
						type: 'success'
					})
					t.loginSuccess(res.data);
					uni.hideLoading()
				}).catch(errors => {
					t.btnLoading=false;
					t.getshijiancuo();
					console.error(errors)
					uni.hideLoading()
				})
			},
			// 登录成功
			loginSuccess(user){
				let that=this;
				if(!that.$store.getters.isLogin){
					that.$store.commit("LOGIN", {
						'token':user.token,
						'time':user.time,
						'userInfo':user,
					});
				}
				that.user.uid=user.uid;
				that.$store.commit("SETUID",user.uid);
				that.$store.commit("UPDATE_USERINFO",user);
				that.$Cache.clear(BACK_URL);
				setTimeout(() => {
					that.btnLoading=false;
					that.tofanhui();
				}, 2000)
			},
			// 忘记密码
			forgetPwd(){
				console.log('忘记密码')
				let t=this;
				uni.showModal({
					confirmText:"联系客服",
					cancelText:"手机登录",
					showCancel:t.config.isSmsLogin=='1'?true:false,
					title:"提示",
					content:"忘记密码了？请使用短信验证码登录，登录成功后在用户中心的安全设置里面可以修改密码。",
					success(e) {
						console.log(e)
						if(e.cancel){
							t.loginTitleCur=1;
						}else{
							if(t.config.serviceUrl){
								t.tourl(t.config.serviceUrl)
							}
						}
					}
				})
			},
			smsCodeChange(text) {
			  this.codeTips = text;
			},
			getSmsCode() {
				let t=this;
			  if (this.$refs.uCode.canGetCode) {
			    if(!uni.$u.trim(t.loginForm.phone)){
			    	t.$refs.uToast.show({
			    		type: 'error',
			    		message:"请输入手机号"
			    	})
			    	return false;
			    }
			    if(!uni.$u.test.mobile(t.loginForm.phone)){
			    	t.$refs.uToast.show({
			    		type: 'error',
			    		message:"手机号格式不正确"
			    	})
			    	return false;
			    }
			    if(!uni.$u.trim(t.loginForm.code)){
			    	t.$refs.uToast.show({
			    		type: 'error',
			    		message:"请输入图形验证码"
			    	})
			    	return false;
			    }
				uni.showLoading({
				  title: '正在获取验证码'
				})
				let dt={
					phone:uni.$u.trim(t.loginForm.phone),
					code:uni.$u.trim(t.loginForm.code),
					codetype:uni.$u.trim(t.codeSjc),
				}
				t.getSendSmsCode(dt);
			  } else {
			    uni.$u.toast('倒计时结束后再发送');
			  }
			},
			getSendSmsCode(dt){
				if(!dt){
					return false;
				}
				userApi("sendSmsCode",dt,'post',true).then(res=>{
					console.log(res)
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					uni.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					t.$refs.uCode.start();
				}).catch(errors => {
					uni.hideLoading();
					console.log(errors)
				})
			},
			getshijiancuo(){
				let sjc=new Date().getTime();
				this.codeSjc=sjc+''+uni.$u.random(1000, 9999);
			},
			loginTitleClick(e){
				console.log(e)
				if(this.loginTitleCur!=e.index){
					this.loginTitleCur=e.index
				}
			},
			retry(){
				this.getconfig();
			},
			tourl(e){
				console.log(e)
				if(!e){
					return true;
				}
				if(e==this.pagePath){
					return true;
				}
				uni.navigateTo({
					url:e,
					fail(error) {
						console.log(error)
						uni.showToast({
							title:"跳转出错",
							icon:"none"
						})
					}
				})
			},
			tofanhui(){
				console.log(1)
				uni.navigateBack({
					delta: 1,
					fail(){
						 uni.reLaunch({
							 url: '/pages/index/index'
						 });
					}
				})
			},
			toindex(){
				uni.reLaunch({
					url: '/pages/index/index'
				});
			},
			// 切换导航
			tabClick(e,i){
				if(this.daohang.naviKey!=i){
					uni.reLaunch({
						url:e.pagePath,
						fail(err) {
							uni.showModal({
								content:err.errMsg,
								title:"错误提示",
								showCancel:false,
								fail(r) {
									console.log(r)
								}
							})
							console.log(err)
						}
					})
				}
				
			},
			getconfig(){
				let that=this;
				wappConfig({pagePath:that.pagePath}).then(e=>{
					console.log(e)
					that.daohang=e.data.naviList;
					that.config=e.data;
					if(!that.codeSjc){
						if(e.data.isCode=='1'){
							that.getshijiancuo();
						}
					}
					if(e.data.isSmsLogin=='1'){
						if(that.loginTitleList.length<=1){
							that.loginTitleList.push({key:"phone",name: '手机登录'})
						}
					}
					if(e.data.loginThemeColor){
						that.bgColor=e.data.loginThemeColor;
					}
					that.loading=false;
				})
				.catch(res => {
					console.log(res)
					uni.showModal({
						content:res.msg?res.msg:res?res:"获取配置文件失败",
						title:"提示",
						showCancel:false
					})
					that.loading=false;
				});
			},
			getuser(){
				let t=this;
				uni.showLoading({
					title:"获取登录状态中..."
				})
				if(this.$store.getters.isLogin){
					t.loginSuccess(this.$store.getters.userInfo);
				}else{
					uni.hideLoading()
					console.log(this.$store.getters.isLogin)
				}
			},
		}
	}
</script>

<style lang="scss">
	.xiangqing{
		.login_heard{
			height: 250rpx;
			background-color: #2979ff;
		}
		.login_title{
			height: 10rpx;
			position: relative;
			&_center{
				position: absolute;
				top:-150rpx;
				left: 50%;
				width: 90%;
				margin-left: -45%;
				min-height: 160rpx;
				border-radius: 18rpx 18rpx 0 0;
				background-color: #fff;
				&_tabs{
					margin: 20rpx;
				}
			}
		}
		.login_center{
			width: 80%;
			margin: 0 auto;
			&_input{
				background-color: rgba(80, 100, 235, 0.1);
				padding: 10rpx 30rpx;
				border-radius: 120rpx;
			}
		}
		.xieyi{
			width: 80%;
			margin: 0 auto;
			margin-top:50rpx;
			&_true{
				display: inline-block;
				vertical-align: bottom;
			}
			&_false{
				display: inline-block;
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				border:1px solid #fff;
				vertical-align: bottom;
			}
			&_text{
				display: inline-block;
				margin-left:10rpx;
			}
			&_link{
				display: inline-block;				
			}
		}
		.loginType{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			&_center{				
				width: 80%;
				margin: 20rpx auto;
			}
			&_data{
				margin-top: 30rpx;
				text-align: center;
				&_item{
					display: inline-block;
					margin:10rpx;
				}
			}
		}
	}
</style>
